<template>
  <header class="sticky top-0 z-50 bg-[#014a95] text-white shadow-none border-none relative">
    <!-- 顶部Logo区域（不变） -->
    <div class="container mx-auto px-0 py-0 h-[183px]">
      <img src="@/assets/images/xuptlogo.png" alt="西安邮电大学Logo"
        class="absolute left-[119px] top-[44px] w-[398px] h-[94px] bg-[rgba(229,229,229,1)] object-contain">
      <img src="@/assets/images/yanjiuyuan.png" alt="低空经济研究院"
        class="absolute left-[593px] top-[56px] w-[404px] h-[70px] object-contain">
      <img src="@/assets/images/xiaoxun.png" alt="校训"
        class="absolute left-[997px] top-[10px] w-[512px] h-[163px] object-contain">
    </div>

    <!-- 底部导航栏：添加小标 + 平分宽度 + 原有样式 -->
    <div class="bg-white border-t border-gray-200 w-[1920px] h-[42px] overflow-x-hidden">
      <div class="container mx-auto px-0">
        <!-- 父容器：flex布局 + 宽度100%，确保子元素可平分 -->
        <nav class="flex items-center h-full w-full">
          <!-- 首页：添加图标 + flex居中 -->
          <router-link to="/" exact active-class="nav-active"
            class="flex-1 py-2 flex items-center justify-center text-black hover:text-blue-600 transition-colors font-medium text-base">
            <i class="fa fa-home mr-2"></i>
            <span>首页</span>
          </router-link>
          <!-- 研究概况：添加图标 + flex居中 -->
         <router-link to="/institute-intro" active-class="nav-active"
  class="flex-1 py-2 flex items-center justify-center text-black hover:text-blue-600 transition-colors font-medium text-base">
  <i class="fa fa-info-circle mr-2"></i>
  <span>研究概况</span>
</router-link>
          <!-- 科研新闻：添加图标 + flex居中 -->
          <router-link to="/news-list" active-class="nav-active"
            class="flex-1 py-2 flex items-center justify-center text-black hover:text-blue-600 transition-colors font-medium text-base">
            <i class="fa fa-newspaper mr-2"></i>
            <span>科研新闻</span>
          </router-link>
          <!-- 产品展示：添加图标 + flex居中 -->
          <router-link to="/product-list" active-class="nav-active"
            class="flex-1 py-2 flex items-center justify-center text-black hover:text-blue-600 transition-colors font-medium text-base">
            <i class="fa fa-box-open mr-2"></i>
            <span>产品展示</span>
          </router-link>
          <!-- 团队风采：添加图标 + flex居中 -->
          <router-link to="/team" active-class="nav-active"
            class="flex-1 py-2 flex items-center justify-center text-black hover:text-blue-600 transition-colors font-medium text-base">
            <i class="fa fa-users mr-2"></i>
            <span>团队风采</span>
          </router-link>
          <!-- 合作交流：添加图标 + flex居中 -->
          <router-link to="/cooperation" active-class="nav-active"
            class="flex-1 py-2 flex items-center justify-center text-black hover:text-blue-600 transition-colors font-medium text-base">
            <i class="fa fa-handshake mr-2"></i>
            <span>合作交流</span>
          </router-link>
          <!-- 登录：添加图标 + flex居中 -->
          <router-link to="/admin/login" active-class="nav-active"
            class="flex-1 py-2 flex items-center justify-center text-black hover:text-blue-600 transition-colors font-medium text-base">
            <i class="fa fa-sign-in mr-2"></i>
            <span>登录</span>
          </router-link>
        </nav>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: 'AppNavbar',
  data() {
    return {
      isMobileMenuOpen: false
    }
  },
  methods: {
    toggleMobileMenu() {
      this.isMobileMenuOpen = !this.isMobileMenuOpen;
    }
  }
}
</script>

<style scoped>
/* 原有选中状态样式不变 */
.nav-active {
  background-color: rgba(59, 130, 246, 0.1);
  /* 浅蓝色背景 */
  color: #2563eb !important;
  /* 深蓝色文字 */
  border-bottom: 3px solid #2563eb;
  /* 底部蓝色横线 */
  padding: 8px 0 !important;
  /* 去掉左右内边距，避免挤压平分宽度 */
  border-radius: 4px 4px 0 0;
}

/* 移动端适配（保持不变） */
@media (max-width: 768px) {
  .flex {
    flex-direction: column;
  }

  nav {
    flex-wrap: wrap;
  }

  router-link {
    width: 100%;
    text-align: center;
  }
}
</style>